<template>
  <div class="container">
    <div class="welcome flex">
      <div class="flex-item" style="display: block;">
        <div class="text">开发如此便捷，赶快来体验吧。</div>
        <div>
          <a :href="demo" target="_blank" class="use">立即体验</a>
        </div>
      </div>
      <div class="flex-item">
        <img src="~/static/img/welcome.png"/>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/utils/config";

export default {
  name: "Welcome",
  data () {
    return {
      demo: config.pro.demo
    }
  }
}
</script>

<style scoped lang="less">
.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 20px auto;
  padding: 20Px 0;
  color: #fff;
  background-color: #475bc3;
  border-radius: 24Px;
  padding-left: 50px;

  .use {
    display: block;
    width: 180Px;
    height: 40Px;
    line-height: 40Px;
    font-size: 16Px;
    font-weight: 700;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #475bc3;
    text-align: center;
    background-color: #fff;
    border-radius: 4Px;
  }

  .text {
    width: 348px;
    font-size: 48Px;
    line-height: 56Px;
    color: #fff;
    padding-bottom: 20Px;
  }
}
</style>
